<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/base.css" />

    <script src="./js/plugins/holder/holder.js"></script>

    <title>个人中心</title>
    <style>
      .my-nav {
        border: 1px solid #f4f4f4;
        margin-left: 11px;
      }

      .my-nav li {
        padding: 10px 0;
      }

      .my-nav a{
        padding:0px 5px;
      }

      .my-nav li a:visited,
      .my-nav li a:link {
        color: black;
        text-decoration: none;
      }

      .order-footer p {
        padding: 0 0;
        text-align: right;
        font-size: 0.9em;
        color: #7e7979;
        margin-bottom: 0;
        margin-top: 2px;
      }

      .order-footer mark {
        color: red;
        font-weight: bold;
      }

      .mark-data {
        font-size: 0.9em;
      }

      .mark-data .card-title a {
        text-decoration: none;
        font-size: 0.9em;
      }

      .mark-price {
        font-size: 1.6em;
        font-weight: bold;
        color: #dc3545;
      }

      .text-2-line {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.85em;
        text-align: justify;
      }

      .text-1-line {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .address-message .card-title{
        font-weight: bold;
      }

      .address-message .card-text{
        font-size: 0.9em;
        margin-bottom:5px;
        color:#413f3f;
      } 

      .address-message .card-text a{
        text-decoration: none;
        font-size: 0.9em;
      }

      .address-add a{
        color:#9c9898;
      }

      .address-add p:first-of-type a{        
        font-size: 5em;
        font-weight: lighter;
      }
    </style>
  </head>

  <body>
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light nvarbar-padding">
      <div class="container">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarText">
          <span class="navbar-text me-auto">
            欢迎光临,请 <a href="#">登录</a> 成为会员
          </span>

          <ul class="navbar-nav mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="my.html">我的</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 顶部导航 end-->

    <main class="container">
      <!-- 搜素框 -->
      <div class="row align-items-center mt-3">
        <div class="col-auto">
          <a href="#">
            <img src="./images/logo.png" alt="" />
          </a>
        </div>
        <div class="col-auto mt-lg-0 mt-3">个人中心</div>
      </div>
      <!-- 搜素框 end -->
    </main>
    <div class="container">
      <div class="row mt-3">
        <div class="col-auto d-flex my-nav px-5 py-4">
          <!-- 左边导航栏 -->
          <ul class="nav nav-pills flex-lg-column" id="myNav" role="tablist">
            <li class="nav-item" role="presentation">
              <a
                href="#"
                id="myOrder-tab"
                data-bs-toggle="tab"
                data-bs-target="#myOrder"
                role="tab"
                aria-controls="myOrder"
                aria-selected="true"
                >我的订单</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                href="#"
                id="mySave-tab"
                data-bs-toggle="tab"
                data-bs-target="#mySave"
                role="tab"
                aria-controls="mySave"
                aria-selected="false"
                >我的收藏</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                href="#"
                id="address-tab"
                data-bs-toggle="tab"
                data-bs-target="#address"
                role="tab"
                aria-controls="address"
                aria-selected="false"
                >收货地址</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                href="#"
                id="myInfo-tab"
                data-bs-toggle="tab"
                data-bs-target="#myInfo"
                role="tab"
                aria-controls="myInfo"
                aria-selected="false"
                >信息维护</a
              >
            </li>
          </ul>
          <!-- 左边导航栏  end-->
        </div>
        <div class="col-9">
          <div class="tab-content">
            <div
              class="tab-pane active"
              id="myOrder"
              role="tabpanel"
              aria-labelledby="myOrder-tab"
            >
              <!-- 我的订单面版 -->
              <div class="card">
                <div class="card-body">
                  <ul class="nav nav-tabs" id="orderInfo" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button
                        class="nav-link active"
                        id="orderAll-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#orderAll"
                        type="button"
                        role="tab"
                        aria-controls="orderAll"
                        aria-selected="true"
                      >
                        所有订单
                      </button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <button
                        class="nav-link"
                        id="pay-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#pay"
                        type="button"
                        role="tab"
                        aria-controls="pay"
                        aria-selected="false"
                      >
                        待支付
                      </button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <button
                        class="nav-link"
                        id="send-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#send"
                        type="button"
                        role="tab"
                        aria-controls="send"
                        aria-selected="false"
                      >
                        待发货
                      </button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <button
                        class="nav-link"
                        id="comment-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#comment"
                        type="button"
                        role="tab"
                        aria-controls="comment"
                        aria-selected="false"
                      >
                        待评价
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content" id="myNavContent">
                    <div
                      class="tab-pane fade show active"
                      id="orderAll"
                      role="tabpanel"
                      aria-labelledby="home-tab"
                    >
                      <!-- 所有订单 -->
                      <!-- 一条订单信息 -->
                      <div class="card mt-3">
                        <div class="card-header">订单号 123123412341234</div>
                        <div class="card-body">
                          <!-- 一条商品信息 -->
                          <div class="row align-items-center">
                            <div class="col-auto d-none d-md-block">
                              <img src="holder.js/60x60" alt="" />
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-6">￥ 23.00x2</div>
                          </div>
                          <!-- 一条商品信息  end-->
                          <!-- 一条商品信息 -->
                          <div class="row align-items-center mt-3">
                            <div class="col-auto d-none d-md-block">
                              <img src="holder.js/60x60" alt="" />
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-3">￥ 23.00x2</div>
                          </div>
                          <!-- 一条商品信息  end-->
                        </div>
                        <div class="card-footer order-footer">
                          <p>张三 湖南长沙 芙蓉区农大一路xx宿舍 134****1234</p>
                          <p>
                            总金额 <mark class="price">￥234.00</mark>
                            <button class="btn btn-sm btn-danger">
                              待收货
                            </button>
                          </p>
                        </div>
                      </div>
                      <!-- 一条订单信息 end -->
                      <!-- 一条订单信息 -->
                      <div class="card mt-3">
                        <div class="card-header">订单号 123123412341234</div>
                        <div class="card-body">
                          <!-- 一条商品信息 -->
                          <div class="row align-items-center">
                            <div class="col-auto d-none d-md-block">
                              <img src="holder.js/60x60" alt="" />
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-6">￥ 23.00x2</div>
                          </div>
                          <!-- 一条商品信息  end-->
                          <!-- 一条商品信息 -->
                          <div class="row align-items-center mt-3">
                            <div class="col-auto d-none d-md-block">
                              <img src="holder.js/60x60" alt="" />
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-3">￥ 23.00x2</div>
                          </div>
                          <!-- 一条商品信息  end-->
                        </div>
                        <div class="card-footer order-footer">
                          <p>张三 湖南长沙 芙蓉区农大一路xx宿舍 134****1234</p>
                          <p>
                            总金额 <mark class="price">￥234.00</mark>
                            <button class="btn btn-sm btn-warning">
                              待支付
                            </button>
                          </p>
                        </div>
                      </div>
                      <!-- 一条订单信息 end -->
                      <!-- 一条订单信息 -->
                      <div class="card mt-3">
                        <div class="card-header">订单号 123123412341234</div>
                        <div class="card-body">
                          <!-- 一条商品信息 -->
                          <div class="row align-items-center">
                            <div class="col-auto d-none d-md-block">
                              <img src="holder.js/60x60" alt="" />
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-6">￥ 23.00x2</div>
                          </div>
                          <!-- 一条商品信息  end-->
                          <!-- 一条商品信息 -->
                          <div class="row align-items-center mt-3">
                            <div class="col-auto d-none d-md-block">
                              <img src="holder.js/60x60" alt="" />
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-3">￥ 23.00x2</div>
                          </div>
                          <!-- 一条商品信息  end-->
                        </div>
                        <div class="card-footer order-footer">
                          <p>张三 湖南长沙 芙蓉区农大一路xx宿舍 134****1234</p>
                          <p>
                            总金额 <mark class="price">￥234.00</mark>
                            <button class="btn btn-sm btn-success">
                              待评价
                            </button>
                          </p>
                        </div>
                      </div>
                      <!-- 一条订单信息 end -->

                      <!-- 所有订单 end -->
                    </div>
                    <div
                      class="tab-pane fade"
                      id="pay"
                      role="tabpanel"
                      aria-labelledby="pay-tab"
                    >
                      待支付
                    </div>
                    <div
                      class="tab-pane fade"
                      id="send"
                      role="tabpanel"
                      aria-labelledby="send-tab"
                    >
                      待发货
                    </div>
                    <div
                      class="tab-pane fade"
                      id="comment"
                      role="tabpanel"
                      aria-labelledby="comment-tab"
                    >
                      待评价
                    </div>
                  </div>
                </div>
              </div>
              <!-- 我的订单面版 end-->
            </div>
            <div
              class="tab-pane"
              id="mySave"
              role="tabpanel"
              aria-labelledby="mySave-tab"
            >
              <!-- 我的收藏面板 -->
              
              <div class="card mb-3">
                <div class="card-header">我的收藏</div>
                <div class="card-body">
                  <!-- 查询一条图书结果信息 -->
                  <div class="row g-0 mb-2">
                    <div class="col-md-2">
                      <img
                        src="holder.js/320x250"
                        class="img-fluid rounded-start"
                        alt="..."
                      />
                    </div>
                    <div class="col-md-10">
                      <div class="card-body mark-data">
                        <h5 class="card-title text-1-line">
                          <a href="#"
                            >Java核心技术第11版基础知识+高级特性套装 套装共2册
                            Core
                            Java第11版，与Java编程思想、EffectiveJava、深入</a
                          >
                        </h5>
                        <p class="card-text mark-price">￥30.00</p>
                        <p class="card-text">
                          [美] 凯·S·霍斯特曼（Cay，S，Horstmann） /2020-08-28
                          /机械工业出版社
                        </p>
                        <p class="card-text text-2-line">
                          适读人群 ：使用Java技术进行实际项目开发的编程人员
                          Java领域极具影响力和价值的著作之一，与《Java编程思想》齐名，10余年全球畅销不衰，广受好评。
                          全新原书中文第11版！针对Java SE
                          9、10、11全面更新，系统全面讲
                        </p>
                        <p class="card-text">
                          <button type="button" class="btn btn-danger">
                            加入购物车
                          </button>
                          <button type="button" class="btn btn-info">
                            删除
                          </button>
                        </p>
                      </div>
                    </div>
                  </div>
                  <!-- 查询一条图书结果信息 end-->
                    <!-- 查询一条图书结果信息 -->
                    <div class="row g-0 mb-2">
                      <div class="col-md-2">
                        <img
                          src="holder.js/320x250"
                          class="img-fluid rounded-start"
                          alt="..."
                        />
                      </div>
                      <div class="col-md-10">
                        <div class="card-body mark-data">
                          <h5 class="card-title text-1-line">
                            <a href="#"
                              >Java核心技术第11版基础知识+高级特性套装 套装共2册
                              Core
                              Java第11版，与Java编程思想、EffectiveJava、深入</a
                            >
                          </h5>
                          <p class="card-text mark-price">￥30.00</p>
                          <p class="card-text">
                            [美] 凯·S·霍斯特曼（Cay，S，Horstmann） /2020-08-28
                            /机械工业出版社
                          </p>
                          <p class="card-text text-2-line">
                            适读人群 ：使用Java技术进行实际项目开发的编程人员
                            Java领域极具影响力和价值的著作之一，与《Java编程思想》齐名，10余年全球畅销不衰，广受好评。
                            全新原书中文第11版！针对Java SE
                            9、10、11全面更新，系统全面讲
                          </p>
                          <p class="card-text">
                            <button type="button" class="btn btn-danger">
                              加入购物车
                            </button>
                            <button type="button" class="btn btn-info">
                              删除
                            </button>
                          </p>
                        </div>
                      </div>
                    </div>
                    <!-- 查询一条图书结果信息 end-->
                      <!-- 查询一条图书结果信息 -->
                  <div class="row g-0 mb-2">
                    <div class="col-md-2">
                      <img
                        src="holder.js/320x250"
                        class="img-fluid rounded-start"
                        alt="..."
                      />
                    </div>
                    <div class="col-md-10">
                      <div class="card-body mark-data">
                        <h5 class="card-title text-1-line">
                          <a href="#"
                            >Java核心技术第11版基础知识+高级特性套装 套装共2册
                            Core
                            Java第11版，与Java编程思想、EffectiveJava、深入</a
                          >
                        </h5>
                        <p class="card-text mark-price">￥30.00</p>
                        <p class="card-text">
                          [美] 凯·S·霍斯特曼（Cay，S，Horstmann） /2020-08-28
                          /机械工业出版社
                        </p>
                        <p class="card-text text-2-line">
                          适读人群 ：使用Java技术进行实际项目开发的编程人员
                          Java领域极具影响力和价值的著作之一，与《Java编程思想》齐名，10余年全球畅销不衰，广受好评。
                          全新原书中文第11版！针对Java SE
                          9、10、11全面更新，系统全面讲
                        </p>
                        <p class="card-text">
                          <button type="button" class="btn btn-danger">
                            加入购物车
                          </button>
                          <button type="button" class="btn btn-info">
                            删除
                          </button>
                        </p>
                      </div>
                    </div>
                  </div>
                  <!-- 查询一条图书结果信息 end-->
                  <!-- 分页 -->
                  <div class="row justify-content-center">
                     <div class="col-4">
                      <nav aria-label="Page navigation example">
                        <ul class="pagination">
                          <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="page-item"><a class="page-link" href="#">1</a></li>
                          <li class="page-item"><a class="page-link" href="#">2</a></li>
                          <li class="page-item"><a class="page-link" href="#">3</a></li>
                          <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                     </div>
                  </div>
                  <!-- 分页 end -->
                </div>
              </div>
              
              <!-- 我的收藏面板 end-->
            </div>
            <div
              class="tab-pane"
              id="address"
              role="tabpanel"
              aria-labelledby="address-tab"
            >
              <!-- 我的地址面板 -->
               <div class="card">
                 <div class="card-header">
                   收货地址
                 </div>
                 <div class="card-body">
                     <!-- 地址数据 -->
                     <div class="row row-cols-1 row-cols-md-2 g-4">
                      <!-- 一条地址数据 -->
                      <div class="col">
                        <div class="card h-100 address-message">                           
                          <div class="card-body">
                            <h5 class="card-title">张三三</h5>
                            <p class="card-text">湖南省长沙市芙蓉区农大路一号 xx宿舍 333</p>
                            <p class="card-text">135 **** 1234</p>
                            <p class="card-text">
                              <a href="#" class="card-link">修改</a>
                              <a href="#" class="card-link">删除</a>
                              <!-- <a href="#" class="card-link">设置为默认</a> -->
                            </p>
                          </div>
                        </div>
                      </div>
                       <!-- 一条地址数据 end-->
                      <!-- 一条地址数据 -->
                      <div class="col">
                        <div class="card h-100 address-message">                           
                          <div class="card-body">
                            <h5 class="card-title">李四四</h5>
                            <p class="card-text">湖南省长沙市芙蓉区农大路一号 xx宿舍 333</p>
                            <p class="card-text">136 **** 1234</p>
                            <p class="card-text">
                              <a href="#" class="card-link">修改</a>
                              <a href="#" class="card-link">删除</a>
                               <a href="#" class="card-link">设置为默认</a>  
                            </p>
                          </div>
                        </div>
                      </div>
                       <!-- 一条地址数据 end-->
                       <!-- 一条地址数据 -->
                      <div class="col">
                        <div class="card h-100 address-message">                           
                          <div class="card-body address-add">                             
                            <p class="card-text  text-center">
                               <a href="#">+</a>
                            </p>                             
                            <p class="card-text text-center"> 
                               <a href="#" class="card-link">添加地址</a>  
                            </p>
                          </div>
                        </div>
                      </div>
                       <!-- 一条地址数据 end-->
                       
                    </div>
                     <!-- 地址数据 end  -->

                 </div>
               </div>
              <!-- 我的地址面板 end-->
            </div>
            <div
              class="tab-pane"
              id="myInfo"
              role="tabpanel"
              aria-labelledby="myInfo-tab"
            >
              <!-- 我的信息面板 -->
               <div class="card">
                 <div class="card-header">
                   信息维护
                 </div>
                 <div class="card-body">
                    <div class="row justify-content-center">
                      <div class="col-12 col-md-6 col-lg-4">
                        <!-- 表单 -->
                       
                          <div class="mb-3">
                            <label for="exampleInputEmail1" class="visually-hidden">Email address</label>
                            <input type="email" class="form-control" placeholder="输入昵称" id="exampleInputEmail1" aria-describedby="emailHelp">
                            <div id="emailHelp" class="form-text"> </div>
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputPassword1" class="visually-hidden">Password</label>
                            <input type="password" class="form-control" placeholder="输入当前密码" id="exampleInputPassword1">
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputPassword1" class="visually-hidden">Password</label>
                            <input type="password" class="form-control" placeholder="输入新密码" id="exampleInputPassword1">
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputPassword1" class="visually-hidden">Password</label>
                            <input type="password" class="form-control" placeholder="重新输入新密码" id="exampleInputPassword1">
                          </div>
                          <button type="button" class="btn btn-primary d-block w-100">提交</button>
                         
                        <!-- 表单 end -->
                      </div>
                    </div>
                 </div>
               </div>
              <!-- 我的信息面板 end-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="doc-footer">&copy;湖南农业大学</footer>
    <!-- 页脚 end -->

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--<script src="./js/plugins/bootstrap@5.1.3/popper.min.js"></script>
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.min.js"></script>-->
  </body>
</html>
